<template>
  <div class="buy-input relative">
    <img
      class="w-40 h-40 absolute left-24"
      src="~@/assets/image/payment/search.png"
      alt=""
    />
    <input
      class="w-full box-border pl-80"
      type="text"
      :value="value"
      :placeholder="placeholder"
      @input="changeVal"
      @focus="focus"
    />
  </div>
</template>

<script>
export default {
  name: 'BuyInput',
  props: ['value', 'placeholder'],
  data() {
    return {}
  },
  methods: {
    focus(e) {
      this.$emit('focus', e.target.value)
    },
    changeVal(e) {
      this.$emit('input', e.target.value)
    },
  },
}
</script>

<style lang="scss" scoped>
input {
  border: none;
  outline: none;
}
.buy-input {
  width: 100%;
  height: 100%;

  img {
    top: 50%;
    transform: translateY(-50%);
  }
  input {
    width: 100%;
    height: 100%;
    border-radius: 50px;
    background: $input_background;
    color: $text_color;
  }
}
</style>
